﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>reportviewer</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/kendo.web.min.js"></script>
    <script src="/js/cultures/kendo.culture.vi-VN.min.js"></script>
    <script src="/js/site.js"></script>

    <link href="reportviewer.css" rel="stylesheet" />

    <script src="/js/pdfLibrary.js"></script>
    <script src="/js/pdfDataSource.js"></script>

    <script src="reportviewer.js"></script>
</head>
<body>
    <div id="busy">
        <progress class="indeterminate" style="width:100%;"></progress>
    </div>

    <!-- Simple template for the ListView instantiation  -->
    <div id="pdfViewTemplate" data-win-control="WinJS.Binding.Template">
        <div id="pdfitemmainviewdiv" data-win-control="WinJS.UI.ViewBox">
            <img src="/images/placeholder.jpg" alt="PDF page" data-win-bind="src: imageSrc blobUriFromStream" style="width: 100%; height: 100%;" />
        </div>
    </div>

    <!-- Simple template for the ListView instantiation  -->
    <div id="pdfSZViewTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div>
            <img src="/images/placeholder.jpg" alt="PDF page thumbnail" data-win-bind="src: imageSrc blobUriFromStream" />
        </div>
    </div>

    <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{zoomedInItem: window.zoomedInItem, zoomedOutItem: window.zoomedOutItem }" style="height: 100%; width: 100%">
        <!-- zoomed-in view. -->
        <div id="zoomedInListView"
             data-win-control="WinJS.UI.ListView"
             data-win-options="{
                                itemTemplate: pdfViewTemplate,
                                selectionMode: 'none',
                                tapBehavior: 'invokeOnly',
                                swipeBehavior: 'none' ,
                                layout: {type: WinJS.UI.GridLayout, maxRows: 1},
                              }">
        </div>

        <!--- zoomed-out view. -->
        <div id="zoomedOutListView"
             data-win-control="WinJS.UI.ListView"
             data-win-options="{
                                itemTemplate: pdfSZViewTemplate,
                                selectionMode: 'none',
                                tapBehavior: 'invokeOnly',
                                swipeBehavior: 'none',
                                layout: {type: WinJS.UI.GridLayout}
                              }">
        </div>
    </div>
    <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout" aria-label="Confirm purchase flyout">
        <div style="width:100%;height:100%" id="flyoutcontent">
            <iframe style="width:100%;height:100%;border-width:0px" src="" ></iframe>
        </div>
    </div>


    <!-- Adding command bar option to open and load a PDF file -->
    <div id="appBar" data-win-control="WinJS.UI.AppBar" style="display: block">
     
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
                                                                    id:'Print',
                                                                    label:'Print',
                                                                    icon:'openfile',
                                                                    section:'global',
                                                                    tooltip:'Print'
                                                                    }"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
                                                                    id:'Close',
                                                                    label:'Close',
                                                                    icon:'back',
                                                                    section:'global',
                                                                    tooltip:'Close'
                                                                    }"></button>
    </div>

</body>
</html>
